<!--用户的兑换记录页面-->
<template>
  <el-card shadow="never" class="aui-card--fill">
    <div>
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item prop="id">
          <el-input v-model="dataForm.id" placeholder="请输入订单id" clearable></el-input>
        </el-form-item>
        <el-form-item prop="userId">
          <el-input v-model="dataForm.userId" placeholder="请输入用户id" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
              v-model="createDateList"
              type="daterange"
              placeholder="请选择创建日期"
              format="yyyy 年 MM 月 dd 日"
              range-separator="至"
              start-placeholder="订单开始日期"
              end-placeholder="订单结束日期"
              value-format="yyyy-MM-dd"
              class=""
              @change="createCK"
          />
        </el-form-item>
        <el-form-item prop="deliveryNumber">
          <el-input v-model="dataForm.deliveryNumber" placeholder="请输入配送单号" clearable></el-input>
        </el-form-item>
        <el-form-item prop="orderStatus">
          <ren-select v-model="dataForm.orderStatus" dict-type="orderStatus" placeholder="请选择订单状态"></ren-select>
        </el-form-item>
        <el-form-item prop="receiveName">
          <el-input v-model="dataForm.receiveName" placeholder="请输入收货人的姓名" clearable></el-input>
        </el-form-item>
        <el-form-item prop="receivePhone">
          <el-input v-model="dataForm.receivePhone" placeholder="请输入收货人的手机号码" clearable></el-input>
        </el-form-item>
        <el-form-item prop="receiveProvince">
          <el-input v-model="dataForm.receiveProvince" placeholder="请输入收货地址所在的省份" clearable></el-input>
        </el-form-item>
        <el-form-item prop="receiveCity">
          <el-input v-model="dataForm.receiveCity" placeholder="请输入收货地址所在的城市" clearable></el-input>
        </el-form-item>
        <el-form-item prop="receiveCounty">
          <el-input v-model="dataForm.receiveCounty" placeholder="请输入收货地址所在的区县" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
        </el-form-item>
        <el-form-item v-if="$hasPermission('api:exportOrder:export')">
          <el-button @click="exportHandle()" type="info">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" stripe highlight-current-row
                @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
                ref="multipleTable" style="width: 100%;">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <el-table-column prop="id" label="订单id" header-align="center" align="center" width="90"></el-table-column>
        <el-table-column prop="userId" label="用户id" header-align="center" align="center"width="90"></el-table-column>
        <el-table-column prop="specsId" label="规格id" header-align="center" align="center"width="90"></el-table-column>
        <el-table-column prop="orderStatus" label="订单状态" header-align="center" align="center"width="100">
          <template slot-scope="{row}">
            <el-tag v-if="row.orderStatus != '0'" size="small" type="success">{{ $getDictLabel("orderStatus", row.orderStatus)}}</el-tag>
            <el-tag v-else size="small" type="danger">{{$getDictLabel("orderStatus", row.orderStatus)}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="imgUrl" label="商品图片" header-align="center" align="center" width="100">
          <template slot-scope="{row}">
            <!-- 图片展示 -->
            <el-popover trigger="click" placement="top" popper-class="popper">
              <img v-if="row.imgUrl" :src="row.imgUrl">
              <el-image v-if="row.imgUrl" slot="reference" :src="row.imgUrl">
                <div slot="error">
                  暂无图片
                </div>
              </el-image>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="specsDesc" label="规格描述" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="receiveName" label="收货人" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="receivePhone" label="手机号码" header-align="center" align="center"width="120"></el-table-column>
        <el-table-column prop="receiveProvince" label="所在省份" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="receiveCity" label="所在城市" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="receiveCounty" label="所在区县" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="receiveAddress" label="详细地址" header-align="center" align="center"width="" show-overflow-tooltip>
          <template slot-scope="{row}">
            <el-tooltip effect="dark" :content="row.receiveAddress" placement="top">
              <div>{{ row.receiveAddress }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="totalPoints" label="支付积分" header-align="center" align="center" width=""></el-table-column>
        <el-table-column prop="expressCompany" label="物流公司" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="trackingNo" label="物流单号" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="logisticsType" label="物流模式" header-align="center" align="center"width=""></el-table-column>
        <el-table-column prop="createDate" label="创建日期" header-align="center" align="center" width="90"></el-table-column>
        <el-table-column label="操作" fixed="right" header-align="center" align="center" width="200">
          <template slot-scope="scope">
            <el-link v-if="$hasPermission('api:userPointsOrder:update') && scope.row.orderStatus===1"
                     type="primary"
                       @click="UploadShippingInfoHandle(scope.row.id)">发货
            </el-link>
            <el-button  type="primary" @click="getOrderList(scope.row)">订单详情</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
                     layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
                     @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      <upload-shipping-info v-if="isUploadShippingInfo" ref="UploadShippingInfo" @refreshDataList="getDataList"></upload-shipping-info>
      <user-order-product-list v-if="isUserOrderProductList" ref="UserOrderProductList" @cancellation="$refs.multipleTable.clearSelection()"></user-order-product-list>
    </div>

  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './userPointsOrderAddOrUpdate.vue'
import UploadShippingInfo from './userPointsOrderUploadShippingInfo.vue'//订单发货
import UserOrderProductList from './userPointsOrderProductList.vue'//订单详情
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      isUploadShippingInfo: false,//发货按钮
      isUserOrderProductList: false,//订单详情弹窗
      mixinViewModuleOptions: {
        getDataListURL: '/api/userPointsOrder/page',
        getDataListIsPage: true,
        deleteURL: '/api/userPointsOrder',
        deleteIsBatch: true,
        exportURL: '/api/userPointsOrder/exportPointsOrder' // 导出接口，API地址
      },
      createDateList: [],               //创建时间数组
      deliveryDateList: [],             //发货时间数组
      payDateList: [],                  //支付时间数组
      dataForm: {
        id: '',                         //订单id
        productId: '',                  //兑换的商品ID
        userId:'',                      //用户id
        specsId: '',                    //商品规格id
        imgUrl: '',                     //图片
        productName: '',                //被购买商品的名称
        specsDesc: '',                  //规格描述
        createDateStart: '',            //开始创建时间
        createDateEnd: '',              //结束创建时间
        deliveryDateStart:'',           //开始发货时间
        deliveryDateEnd: '',            //结束发货时间
        orderStatus: '',                //订单的当前状态，(1) 待发货；(2) 已发货；
        receiveName: '',                //记录收货人的姓名。
        receivePhone: '',               //记录收货人的手机号码
        receiveProvince: '',            //记录收货地址所在的省、州或自治区
        receiveCity: '',                //记录收货地址所在的城市
        receiveCounty: '',              //记录收货地址所在的区县
        receiveAddress:'',              //记录详细的街道地址，如门牌号、楼层等
        totalPoints: '',                //支付积分
        expressCompany: '',             //物流公司编码，快递公司ID，参见「查询物流公司编码列表」，物流快递发货时必填， 示例值: DHL 字符字节限制: [1, 128]
        trackingNo: '',                 //物流单号，物流快递发货时必填，示例值: 323244567777 字符字节限制: [1, 128]
        logisticsType: '',              //物流模式
      },
    }
  },
  components: {
    AddOrUpdate,
    UploadShippingInfo,
    UserOrderProductList
  },
  created() {

  },
  methods: {
    /*创建时间选择*/
    createCK() {
      if (!this.createDateList){
        this.dataForm.createDateStart = ''
        this.dataForm.createDateEnd = ''
        return
      }
      this.dataForm.createDateStart = this.createDateList[0]
      this.dataForm.createDateEnd = this.createDateList[1]
    },
    /*发货时间选择*/
    deliveryCK() {
      this.dataForm.deliveryDateStart = this.deliveryDateList[0]
      this.dataForm.deliveryDateEnd = this.deliveryDateList[1]
    },
    /*创建时间选择*/
    payCK() {
      this.dataForm.payDateStart = this.payDateList[0]
      this.dataForm.payDateEnd = this.payDateList[1]
    },
    //订单发货
    UploadShippingInfoHandle(id){
      this.isUploadShippingInfo = true
      this.$nextTick(() => {
        this.$refs.UploadShippingInfo.dataForm.id = id
        this.$refs.UploadShippingInfo.init()
      })
    },
    //查看订单信息
    getOrderList(id){
      this.$refs.multipleTable.toggleRowSelection(item);
      this.isUserOrderProductList = true
      this.$nextTick(() => {
        this.$refs.UserOrderProductList.dataForm.id = id
        this.$refs.UserOrderProductList.init()
      })
    }
  }
}
</script>
